<template>
  <div class="container">
    <div>
      <el-row :gutter="1">
        <!-- <el-col :span="4">
          <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="处理厂名称：">
              <el-input v-model="select.name" placeholder="请输入处理厂名称" style="width:150px;"></el-input>
            </el-form-item>
          </el-form>
        </el-col> -->
        <el-col :span="8">
          <el-form ref="form" :model="form" style="float: right">
            <el-form-item>
              <el-button size="mini" type="primary" @click="screeningData"
                >查 询</el-button
              >
              <el-button size="mini" type="success" @click="handleAdd"
                >新 增</el-button
              >
              <!-- <el-button style="padding: 0; border: 0">
                <el-upload
                  action="/上传文件的接口"
                  :on-change="onChange"
                  :auto-upload="false"
                  :show-file-list="false"
                  accept=".xls, .xlsx"
                  class="upload"
                >
                  <el-button size="mini" type="success">导 入</el-button>
                </el-upload>
              </el-button> -->
              <el-button size="mini" type="warning" @click="exportExcel"
                >导 出</el-button
              >
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <!-- 数据列表 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        prop="index"
        label="标段编号"
        width="150"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="name"
        label="标段名称"
        align="center"
      ></el-table-column>
      <el-table-column prop="personnelCount" label="所属区" align="center">
      </el-table-column>
      <el-table-column prop="workTime" label="所属作业公司" align="center">
      </el-table-column>
      <el-table-column prop="personnelName" label="垃圾点位" align="center">
      </el-table-column>
      <el-table-column label="操作" width="300" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-info"
            @click="showRoadList(scope.$index, scope.row)"
            >展示区域路段</el-button
          >
          <!-- <el-button
                    type="text"
                    icon="el-icon-info"
                    @click="showPersonnelList(scope.$index, scope.row)"
                    >展示区域垃圾点位</el-button
                  > -->
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import '@/assets/css/common.css'
import { formatDate } from '@/common/js/date.js'
import export2Excel from '@/utils/exportExcel/index.js'
import OSS from 'ali-oss';
import { time } from 'echarts';
import eventBus from '@/eventBus.js'


export default {
  data () {
    return {
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      originalData: [],
      tableData: [],
      form: {
        name: ''
      },
    }
  },
  mounted () {
    this.getlistdata()
  },
  methods: {
    handleAdd () {
      eventBus.$emit('addArea', this.tableData)
    },
    getlistdata () {
      this.originalData = [{
        index: '89', name: '屏花里', personnelCount: '12', personnelName: '单明贤', workTime: '07:00 - 17:00', area: [{ lng: '117.2351337661583', lat: '39.16890437825147' },
        { lng: '117.22399477783458', lat: '39.1612956044761' },
        { lng: '117.23182800188158', lat: '39.15390982465369' },
        { lng: '117.2353493594807', lat: '39.156203976315645' }]
      },
      {
        index: '90', name: '迎福里', personnelCount: '6', personnelName: '刘悦', workTime: '07:00 - 17:00', area: [{ lng: '117.22392740492133', lat: '39.161113767010114' },
        { lng: '117.22187926835858', lat: '39.15968702583259' },
        { lng: '117.22191520057898', lat: '39.158791800788094' },
        { lng: '117.22231045500337', lat: '39.1577007297377' },
        { lng: '117.22256198054616', lat: '39.157197152730305' },
        { lng: '117.22791588138563', lat: '39.151489692695534' },
        { lng: '117.23161690008673', lat: '39.153979769416395' }]
      },
      {
        index: '91', name: '华康里', personnelCount: '6', personnelName: '刘悦', workTime: '07:00 - 17:00', area: [{ lng: '117.22786198305502', lat: '39.15146171380074' },
        { lng: '117.23407825718408', lat: '39.145054251562115' },
        { lng: '117.24178571845968', lat: '39.147950273485726' },
        { lng: '117.24210910844327', lat: '39.14842593709803' },
        { lng: '117.24192944734128', lat: '39.15077622737538' },
        { lng: '117.2412826673741', lat: '39.15634386117286' },
        { lng: '117.23614435985702', lat: '39.15634386117286' },
        { lng: '117.23485079992265', lat: '39.15598015996093' }]
      },
      {
        index: '92', name: '红城', personnelCount: '6', personnelName: '刘悦', workTime: '07:00 - 17:00', area: [{ lng: '117.24139046403529', lat: '39.164890294023316' },
        { lng: '117.24153419291689', lat: '39.15652571106807' },
        { lng: '117.24232470176567', lat: '39.14885962756698' },
        { lng: '117.24271995619006', lat: '39.148439927155195' },
        { lng: '117.25069690911867', lat: '39.148775687686474' },
        { lng: '117.2574162343333', lat: '39.149615081949555' },
        { lng: '117.25651792882333', lat: '39.15593819431451' },
        { lng: '117.25256538457943', lat: '39.156106056748776' }]
      },]

      this.screeningData()
      // this.tableData.forEach(plan => {
      //   var pointsTurf = []
      //   var points = []
      //   if (plan.area.length > 3) {
      //     plan.area.forEach(point => {
      //       pointsTurf.push(turf.point([point.lng, point.lat]))
      //     })
      //     // 凸包点位数据，生成多边形顶点，矫正顶点顺序
      //     var hull = turf.convex(turf.featureCollection(pointsTurf))
      //     // console.log(hull);

      //     hull.geometry.coordinates[0].forEach(element => {
      //       points.push(new BMap.Point(element[0], element[1]))
      //       // points.push([element[0], element[1]])
      //     })
      //   } else {
      //     plan.area.forEach(point => {
      //       points.push(new BMap.Point(point.lng, point.lat))
      //       // points.push([point.lng, point.lat])
      //     })
      //   }
      //   var polygon = new BMap.Polygon(points, {
      //     strokeColor: 'rgba(58, 107, 219, 1)',
      //     strokeWeight: 3,
      //     strokeStyle: 'dashed',
      //     fillColor: 'rgba(255, 255, 255, 0.65)'
      //   })
      //   polygon.ID = plan.index
      //   const _this = this
      //   // polygon.addEventListener('dblclick', function (oEvent) {
      //   //   _this.planID = this.ID
      //   //   // _this.MouseEvent.left = oEvent.clientX
      //   //   // _this.MouseEvent.top = oEvent.clientY
      //   //   // _this.MouseEvent.isShow = true

      //   //   // console.log(this.ID)
      //   //   _this.editOverlay(this)
      //   // })
      //   // polygon.addEventListener("mouseout", function (oEvent) {
      //   //   _this.MouseEvent.isShow = false;
      //   // });
      //   this.map.addOverlay(polygon)
      //   // this.polygonPlannedRoute.push(polygon)
      // })
    },
    // 模糊查询
    screeningData () {
      this.currentPage = 1;
      this.tableData = this.originalData
      // if (this.select.name) this.tableData = this.tableData.filter(item => item.POINTNAME.includes(this.select.name))
      // console.log(this.select.name)
      eventBus.$emit('mapData_Area', this.tableData)
    },
    // 导出Excel
    exportExcel () {
      let excelName = '垃圾点信息'
      const tHeader = ['垃圾点名称', '点位名称', '经度', '纬度', '区域ID', '作业车辆']
      const filterVal = ['POINTNAME', 'TOWNNAME', 'LONGITUDE', 'LATITUDE', 'CLIENT_NO', 'VEHICLE']
      export2Excel(tHeader, filterVal, this.tableData, excelName)
    },
    // 双击表格某一行
    dblClickRow (row) {
      eventBus.$emit('mapDBrowArea', row)
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getlistdata();
    },
    handleSizeChange (size) {
      this.pageSize = size;
      console.log(this.pageSize)
    },
  }
}
</script>
<style>
.container {
  overflow-y: auto;
  height: calc(100% - 50px);
  border: 0px;
}
.el-col-6 {
  min-width: 400px;
  min-height: 50px;
}
.el-table th {
  height: 40px;
}
.el-form-item label {
  width: 80px;
}
/* .el-upload--text {
  width: 300px;
} */
</style>